<template>
<div>
  <list-page
      ref="listPage"
      :stripe='true'
      :columns='tableColumns'
      :columnKey='columnKey'
      :data='listData'
      :loading='loading'
      :totalCount='totalCount'
      :pageIndex='pageIndex'
      :autoActionColumn='false'
      :showAddButton=false
      @load-data='loadData'>
    </list-page>
</div>
</template>
<script>
import ListPage from '@/components/list-page'
import { mapActions } from 'vuex'
export default {
  name: 'schedulerView',
  components: {
    ListPage
  },
  data () {
    return {
      tableColumns: [
        {
          type: 'index',
          title: '序号',
          align: 'center',
          width: 60
        },
        {
          title: 'schedName',
          key: 'schedName'
        },
        {
          title: 'instanceName',
          key: 'instanceName'
        },
        {
          title: 'registerTime',
          key: 'registerTime'
        },
        {
          title: 'lastCheckTime',
          key: 'lastCheckTime'
        }
      ],
      columnKey: 'schedId',
      listData: [],
      loading: false,
      totalCount: 100,
      pageIndex: 1
    }
  },
  methods: {
    ...mapActions('schedulerStore', [
      'loadList'
    ]),
    loadData: function (pageInfo) {
      console.log('>> load-data')
      if (!pageInfo) {
        pageInfo = {
          pageIndex: this.pageIndex,
          pageSize: this.pageSize
        }
      }
      // console.log('>>>pageInfo', pageInfo)
      this.loading = true
      this.loadList(pageInfo)
        .then(res => {
          this.totalCount = res.data.total
          let data = res.data.list.map((item, index) => {
            let itemMap = this.$contextUtils.convertObjectNumberPropertieToString(item)
            return itemMap
          })
          this.listData = data
          this.loading = false
        })
        .catch(err => {
          console.log(err)
          this.loading = false
        })
    }
  }

}
</script>
